<template>
	<view class="mine">
		<view class="mine-head">
			<div class="mine-head-top"></div>
			<div class="mine-head-center"></div>
			<div class="mine-head-bot"></div>
		</view>	
		<view class="myorder">
			<view class="myorder-head">
				<text class="t-l">我的订单</text><text class="t-r">全部订单 ></text>
			</view>
			<view class="myorder-content">
				<view>购物车</view>
				<view>代付款</view>
				<view>代发货</view>
				<view>代收货</view>
			</view>
		</view>
		<!--九宫格 -->
		<view class="page grid">
			<view class="uni-grid-9">
				<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in date" :key="index" :class="index % 3 === 2 ? 'no-border-right' : ''">
					<image class="uni-grid-9-image" :src="item"></image>
					<text class="uni-grid-9-text">grid</text>
				</view>
			</view>
		</view>
		 <!--九宫格 -->
	</view>
	


</template>

<script>
	export default {
		data: {
			date: ["../../static/c1.png", "../../static/c2.png", "../../static/c3.png",
				"../../static/c4.png", "../../static/c5.png", "../../static/c6.png",
				"../../static/c7.png", "../../static/c8.png", "../../static/c9.png"
			]
		}
	}
</script>

<style>
	@import "../../common/uni.css";
	.mine{display: inline-block;}
	.mine-head{position: relative;text-align: center;height: 320rpx;}
	.mine-head .mine-head-top,.mine-head-bot{height: 200rpx;position: absolute;width: 100%;}
	.mine-head .mine-head-top{background-color: #BBB;border-radius:0 0 100% 100%;z-index: 2;}
	.mine-head .mine-head-bot{background-color:#ccc;z-index: 1;top:100rpx;}
	.mine-head .mine-head-center{width: 600rpx;height: 220rpx;background-color: #fff;position: absolute;z-index: 3;top: 50rpx;margin-left: 50%;left: -300rpx;}
	 page {background: #efeff4;}
	 .myorder{font-size: 28rpx;background-color: #fff;margin-bottom: 20rpx;display:block;}
	 .myorder .myorder-head{height: 60rpx;line-height: 60rpx;}
	 .myorder .t-l{margin-left: 30rpx;}
	 .myorder .t-r{margin-right: 30rpx;float: right;}
	 .myorder .myorder-head{border-bottom: 1rpx solid #6D6D72;}
	 .myorder .myorder-content{display: flex;flex: nowrap;text-align: center;}
	 .myorder .myorder-content view{flex: 1;height: 140rpx;display: block;}

</style>
